<template>
<div class="bankcard-box">
  <nav-bar title="添加银行卡" fixed="fixed" />
  <div class="bankcard">
      <j-input type="text" v-model="mobileValue" label="持卡人" max="11" class="bd-b" placeholder="持卡人姓名"/>
      <j-input type="text" v-model="codeValue" label="卡号"  class="bd-b" placeholder="银行卡号"></j-input>
      <j-input type="text" v-model="codeValue" label="支行" class="bd-b" placeholder="支行"></j-input>
      <j-input type="text" v-model="codeValue" label="手机号" max="11" class="bd-b" placeholder="预留手机号"></j-input>
      <j-input type="text" v-model="codeValue" label="验证码" max="4" placeholder="验证码">
        <div class="verification bd-l">
          <span class="code" :class="{disable: !disable}" @click="getCode">{{count?count + 's': codeText}}</span>
        </div>
      </j-input>
  </div>
   <div class="addCard">
    <j-botton type="blue" :disabled="disabled" :loading="isLoading" loadingText='提交中' @click.native="Login">+添加银行卡</j-botton>
  </div>
</div>
</template>
<script>
export default {
  name: 'RealName',
  data() {
    return {
      disabled: false,
      isLoading: false,
      disable: true,
      mobileValue: '',
      codeValue: '',
      passwordValue: '',
      confirmPpassword: '',
      recommendedCode: '',
      colde: '',
      codeText: '获取验证码',
      count: '',
      timer: null
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    getSMS() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.disable = false;
        this.timer = setInterval(() => {
          this.count && (this.codeText = '重新获取');
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.disable = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    getCode() {
      var isPhone = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobileValue));
      if (isPhone) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      if (!this.disable) {
        return;
      }
      // this.getSMS();
      this.$API.user.sendMsg({
        mobile: this.mobileValue + '',
        type: 1
      }).then(res => {
        if (res.code === -1) {
          this.$toast(res.message);
        } else {
          this.getSMS();
          this.$toast('验证码发送成功,请注意查收');
        }
      });
    },
    addSubmit() {
      if (this.isLoading) {
        return;
      }
      var disabled = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobileValue));
      if (disabled) {
        // this.$toast.loading();
        this.$toast('请输入正确的手机号!');
        return;
      }
      var _account = this.mobileValue + '';
      var _password = this.passwordValue + '';
      if (!_account) {
        this.$toast('手机号不能为空');
        return;
      }
      if (!this.codeValue) {
        this.$toast('验证码不能为空');
        return;
      }
      if (!_password) {
        this.$toast('密码不能为空');
        return;
      }
      if (!this.confirmPpassword) {
        this.$toast('确认密码不能为空');
        return;
      }
      if (this.passwordValue !== this.confirmPpassword) {
        this.$toast('两次密码输入的不一致!');
        return;
      }
      if (!this.recommendedCode) {
        this.$toast('邀请码不能为空');
      }
    }
  }
};
</script>
<style lang="less" scoped>
.bankcard-box{
  .bankcard{
    background-color: #fff;
  }
  .addCard{
    margin-top:100px;
    padding: 0 30px;
  }
  .verification{
    width: 200px;
    height: 52px;
    position: relative;
    font-size: 30px;
    .code{
      position: absolute;
      right: 0;
      top:-5px;;
      width: 200px;
      height: 58px;
      text-align: center;
      line-height: 58px;
      font-size: 26px;
      text-align: center;
      border: 1px solid #FF3030; /*no*/
      border-radius: 58px;
      color: #E31D1A;
    }
    .code.disable{
      color: #666;
    }
  }
}
</style>
